<script setup>
import LayoutNav from '../Layout/components/LayoutNav.vue';
import LayoutFooter from '../Layout/components/LayoutFooter.vue';

import { ref } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter();
const formRef = ref(null)
const dialogVisible = ref(false)
const form = ref({
  userid:'',
  name: '',
  keeper: '',
  phone: '',
  email: '',
  address: '',
  category: '',
  lisence: '',
  idcard: '',
  shopType: '',
  counterType:''
})

const rules = {
  shopType: [
    { required: true, message: '请选择开店类型', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请输入店铺名称', trigger: 'blur' }
  ],
  keeper: [
    { required: true, message: '请输入联系人姓名', trigger: 'blur' }
  ],
  idcard: [
    { required: true, message: '请输入身份证号', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
  ],
  address: [
    { required: true, message: '请输入详细地址', trigger: 'blur' }
  ],
  category: [
    { required: true, message: '请选择店铺类型', trigger: 'blur' }
  ],
  lisence: [
    { required: true, message: '请上传店铺资质', trigger: 'blur' }
  ],
  counterType: [
    { required: true, message: '请选择批发商档次', trigger: 'blur' }
  ]

}

import { applyMerchant } from '@/api/user';
import { ElMessage, ElMessageBox } from 'element-plus'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore();
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      form.value.userid = userStore.id
      console.log(form.value);
        ElMessageBox.alert("申请成功，平台会在1-3个工作日审核", "系统提示", {
          dangerouslyUseHTMLString: true,
          type: "success",
        }).then(() => {
          router.push("/");
        }).catch(() => { });

    } 
  })
}

import { useTokenStore } from '@/store/token'

// 获取登录用户信息
const tokenStore = useTokenStore();
// 配置请求头
const headers = {
  Authorization: encodeURIComponent(tokenStore.getToken())
}

const handleAddingGoodSuccess = (res) => {
    if (res.code === 0) {
      form.value.lisence = res.data
      ElMessage.success('图片上传成功')
  } else {
    ElMessage.error(res.message || '上传失败')
  }
}

// 上传失败回调
const handleAvatarError = (error) => {
  console.error('上传错误:', error)
  ElMessage.error('上传失败，请重试')
}

const resetForm = () => {
  formRef.value.resetFields()
}


</script>
<template>
  <LayoutNav/>
  <div class="header">
    <div class="container">
      <div class="box">
        <div class="logo">
        <RouterLink to="/">桃禧</RouterLink>
        </div>
        <p>商家入驻</p>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="main">
      <div class="form-contain">
        <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
        <!-- 店铺类型选择 -->
          <el-form-item label="店铺类型">
            <el-select v-model="form.shopType" placeholder="请选择店铺类型">
              <el-option label="实体店" value="store"></el-option>
              <el-option label="批发商" value="wholesaler"></el-option>
              <el-option label="加工厂" value="factory"></el-option>
            </el-select>
          </el-form-item>
          <!-- 公共字段 -->
          <el-form-item label="店铺名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入商家名称"></el-input>
          </el-form-item>
          <el-form-item label="开店人姓名" prop="contact">
            <el-input v-model="form.keeper" placeholder="请输入开店人姓名"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="idcard">
            <el-input v-model="form.idcard" placeholder="请输入身份证号"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" placeholder="请输入邮箱地址"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="form.address" placeholder="请输入详细地址"></el-input>
          </el-form-item>
          <!-- 特定字段 -->
          <el-form-item label="档口类型" v-if="form.shopType === 'type2'">
            <el-select v-model="form.counterType" placeholder="请选择档口类型">
              <el-option label="一档" value="counter1"></el-option>
              <el-option label="二档" value="counter2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="店铺服装类型" prop="category">
            <el-input v-model="form.category" placeholder="店铺服装类型"></el-input>
          </el-form-item>
          <el-form-item label="店铺资质" prop="lisence">
            <el-upload
              class="avatar-uploader"
              action='http://localhost:8081/taoxi/upload'
              :headers="headers"
              :show-file-list="false"
              :on-success="handleAddingGoodSuccess"
              :on-error="handleAvatarError"
            >
              <img v-if="form.lisence" :src="form.lisence" class="avatar" />
              <el-icon v-else><Plus /><p>上传</p></el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
  <LayoutFooter/>
  <el-dialog v-model="dialogVisible" title="Tips" width="500" draggable>
    <span>It's a draggable Dialog</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang='scss'>
  .header{
    background: #fff;
    height: 100px;
    border-bottom:1px solid #ccc;
  }
  .box{
    display: flex;
    margin-left: 100px;

    p{
      font-size: 24px;
      margin-left: 20px;
      margin-top: 50px;
    }
  }

  .avatar-uploader {
  :deep(.el-upload) {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
    
    &:hover {
      border-color: var(--el-color-primary);
    }
  }
}

  .logo {
    width: 80px;

    a {
      display: block;
      height: 100px;
      width: 100%;
      text-indent: -9999px;
      background: url('@/assets/images/logo.png') no-repeat center 18px / contain;
    }
  }
  .main{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .form-contain{
    width: 500px;
    margin-top:20px
  }

</style>